<!-- Dom模板 -->
<template>
  <div>
    <div class="home-box">
      <div class="home-box-top">
        <div class="home_boxTop">
          <div class="home-top-top">
            <div class="home-header">
              <li
                @click="erTiao(item)"
                v-for="(item, index) in ejDataList"
                :key="index"
                :class="$route.path === item.path ? 'homeNowindex' : ''"
              >
                {{ item.meta.name }}
              </li>
            </div>
          </div>
          <span class="iconfont icon-caidan3" @click="classifyAlert()"></span>
        </div>

        <div class="home-box-search" @click="search">
          <el-input
            placeholder="农家世子妃"
            prefix-icon="el-icon-search"
            v-model="input2"
            disabled
          >
          </el-input>
          <div class="home-box-icon">
            <span class="iconfont icon-biao" @click="history"></span>
            <span class="iconfont icon-xiazai" @click="download"></span>

          </div>
        </div>
      </div>
      <transition name="index">
        <router-view class="home-box-main"></router-view>
      </transition>
    </div>

    <div class="historyBox">
          <van-popup v-model="show" round position="right" :style="{ height: '100%',width:'85%'}">
                 <Historys :shows="show" @close="close"/>
          </van-popup>
    </div>
    <div class="historyBox">
          <van-popup v-model="flag" round position="right" :style="{ height: '100%',width:'85%'}">
                 <Download />
          </van-popup>
    </div>
 
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { myMixins } from "@/mixins/homeMixins.js";

import Historys from '../../components/playmusic/bofangHIstory.vue'
import Download from './download.vue'
export default {
  mixins: [myMixins],
  components:{
    Historys,
    Download
  },
  name: "",
  data() {
    return {
      msg: "测试",
      input2: "",
      ejData: [],
      ejDataList: [],
      itemName: "",
      show:false,
      flag:false

    };
  },

  created() {
    //   this.$store.dispatch('homes/getDataChange','vip')
  },
  mounted() {
    this.filtes();
  },

  methods: {
    alertFlages(res){
      this.flag=res
    },
    download() {
      if (sessionStorage.getItem("userId")) {
        this.flag=true;
      }
    },
    filtes() {
      this.ejData = this.$router.options.routes.filter((item) => {
        return item.hidden != true;
      });
      let num = this.$route.meta.nowIndex;
      this.ejDataList = this.ejData[num].children;
    },
    search(e) {
      this.$store.commit("bags/queryPath", this.$route.path);
      if (e.target.nodeName == "INPUT") {
        this.$router.history.push({
          path: "/search",
          query: {
            path: this.$route.path,
          },
        });
      }
    },
    classifyAlert() {
      this.$router.push("/classify");
    },
    history(){
        this.show= true 
    },
    close(res){
      this.show= res
    }
  },
};
</script>

<style>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.home-box {
  width: 100%;
  height: calc(100vh - 1.4944rem);
  overflow: hidden;
  background-color: white;
}
.home-box-top {
  width: 100%;
  height: 2.666667rem;
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
}
.home-main-hua {
  width: 100%;
  height: calc(100vh - 4.1632rem);
  /* height:calc(100vh - 4.213298rem); */
  overflow-y: auto;
}
.home_boxTop {
  width: 93%;
  display: flex;
  height: 1.306667rem;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.home_boxTop > span {
  width: 12%;
  font-size: 0.533333rem;
  padding-left: 0.533333rem;
  text-align: right;
  color: #ff6e2e;
}
.home-top-top {
  width: 80;
  overflow-x: auto;
}
.home-header {
  width: 13.333333rem;
  height: 1.306667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.home-header li {
  font-family: "PingFangSC-regular";

  width: 150px;
  text-align: center;
}

.homeNowindex {
  font-weight: bold;
  color: red;
}
/* .home-header li:nth-child(1){
            font-weight: bold;
        } */
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.home-box-search {
  width: 89%;
  height: 1.2rem;
  align-items: center;
  margin-left: 6%;
  display: flex;
  justify-content: space-around;
}
.home-box-icon {
  width: 20%;
  display: flex;
  justify-content: space-around;
  color: rgba(229, 229, 229, 229);
}
.home-box-icon span {
  display: inline-block;
  font-size: 24px;
  margin: 0 8px;
}
.el-input__inner {
  border-radius: 35px;
  width: 90%;
  height: 0.8rem;
  background: rgba(229, 229, 229, 0.3);
}
.home-image {
  width: 90%;
  margin-left: 5%;
  height: 3.306667rem;
  position: relative;
  top: 2.666667rem;
  left: 0;
}
.home-image img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.home-box-main {
  width: 100%;
  height: auto;
  position: relative;
  top: 2.666667rem;
  transition: all 0.3s ease-in-out;
}
.index-enter {
  transform: translateX(100%);
}
.index-leave-to {
  transform: translateX(-100%);
}
.el-input__prefix i {
  line-height: 30px;
}
</style>